<template>
	<view class="delive-fee">
		<gyd-navbar back-color="#fff" :title="title"></gyd-navbar>

		<view class="content">
			<gyd-tabs :list="tabsList" @clickItem="changeTab"></gyd-tabs>
			<view class="goods-list">
				<view class="goods-item" v-for="(item,index) in goodsList" :key="index">
					<viwe class="procut">
						{{item.name}}
					</viwe>
					<viwe class="value">
						<input class="num" type="text" v-model="item.delive_fee" placeholder="请输入" />
						<text class="unit">元</text>
					</viwe>
				</view>
			</view>
		</view>

		<view class="footer">
			<view class="btn-group">
				<u-button type="primary" size="large" block @click="submit()">提交</u-button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import request from '@/utils/request';
	import cache from '@/utils/cache';
	import util from '@/utils/util';
	import {
		ref,
		reactive,
		toRefs,
		inject,
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReady,
		onPullDownRefresh,
		onReachBottom,
	} from '@dcloudio/uni-app';

	const state = reactive({
		title: '配送提成配置',
		themeColor: cache.get('themeColor'),
		imgHost: util.requestUrl(),
		master_id: 0,
		tabsList: ['桶装水', '瓶装水'],
		current: 0,
		goodsList: [],
	});

	//在页面所有元素加载完成后执行（只执行一次）
	onLoad((opt) => {
		console.log('onLoad');
		if (opt.hasOwnProperty('master_id')) {
			console.log('传递参数', opt.master_id);
			state.master_id = opt.master_id;
		}
		initData()
	});

	//在页面由不可见变为可见时执行（只要页面显示都会执行）
	onShow(() => {
		console.log('onShow');
	})

	//在页面解析完成之后执行
	onReady(() => {
		console.log('onReady');
	})

	onPullDownRefresh(() => {
		console.log('下拉刷新');
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 1000);
	})

	onReachBottom(() => {
		console.log('触底加载更多');
	})

	function initData() {
		state.goodsList = [{
			id: 1,
			name: '测试商品',
			delive_fee: 0,
		}, {
			id: 2,
			name: '测试商品',
			delive_fee: 0,
		}, {
			id: 3,
			name: '测试商品',
			delive_fee: 0,
		}]
	}

	function changeTab(index) {
		state.current = index;
	}

	function pageRoute(url) {
		uni.navigateTo({
			url
		});
	}

	function pageTabRoute(url) {
		uni.reLaunch({
			url
		});
	}

	const {
		title,
		themeColor,
		imgHost,
		master_id,
		tabsList,
		current,
		goodsList,
	} = toRefs(state);
</script>

<style lang="scss">
	.delive-fee {
		.content {
			.tabs {
				background: #fff;
				text-align: center;
			}

			.goods-list {
				.goods-item {
					display: flex;
					background: #fff;
					margin: $m24;
					border-radius: 16rpx;
					padding: 10rpx;

					.procut {
						flex: 1;
					}

					.value {
						width: 100rpx;
						display: flex;
						align-items: center;

						.num {}

						.unit {
							width: 50rpx;
							margin-right: 20rpx;
							font-size: 24rpx;
							color: $primary-color;
						}
					}
				}
			}
		}

		.footer {
			position: fixed;
			/* 固定在底部 */
			bottom: 0;
			width: 100%;

			.btn-group {}
		}
	}
</style>